<!doctype html>
<%@page contentType="text/html;charset=UTF-8"%>
<jsp:directive.page import="com.cn.ccp.bean.UserBean" />
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<html>
<f:view>
<f:loadBundle var="messages" basename="messages"></f:loadBundle>
<head>
<meta charset="utf-8">
<title><h:outputText value="#{messages['system_title']}" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- styles -->
    <link href="<%=request.getContextPath()%>/css/bootstrap.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/custom.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="../../../js/html5.js"></script>
    <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<%=request.getContextPath()%>/images/icon/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<%=request.getContextPath()%>/images/icon/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<%=request.getContextPath()%>/images/icon/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="<%=request.getContextPath()%>/images/icon/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="<%=request.getContextPath()%>/images/icon/favicon.png">
	<script type="text/javascript">
		var judgmentValue = "";
		function optionSelect(rVal){
			document.getElementById("formid:training_refrence_answer").value = "";
			if(rVal == '0'){
				document.getElementById("optionSelectDiv1").style.display = "none";
				document.getElementById("optionSelectDiv2").style.display = "block";
				document.getElementById("optionSelectDiv3").style.display = "block";
			}else{
				document.getElementById("optionSelectDiv1").style.display = "block";
				document.getElementById("optionSelectDiv2").style.display = "none";
				document.getElementById("optionSelectDiv3").style.display = "none";
				document.getElementById("formid:training_refrence_answer").value = judgmentValue ;
			}
		}
		function optionsJudgment(rVal){
			judgmentValue = rVal;
			document.getElementById("formid:training_refrence_answer").value = rVal ;
		}
		function initDiv(){
			var rVal = document.getElementById("formid:hiddenOptionTypeId").value;
			if(rVal == '0'){
				document.getElementById("optionSelectDiv1").style.display = "none";
				document.getElementById("optionSelectDiv2").style.display = "block";
				document.getElementById("optionSelectDiv3").style.display = "block";
			}else{
				document.getElementById("optionSelectDiv1").style.display = "block";
				document.getElementById("optionSelectDiv2").style.display = "none";
				document.getElementById("optionSelectDiv3").style.display = "none";
			}
		}
	</script>
</head>

<body class="bg-white" onload="initDiv();" style="overflow-x:hidden;">
<a id="viewDiv"></a>
	<h:form id="formid" styleClass="form-horizontal" style="margin-left: 20px;margin-right: 20px" >
		<h:inputHidden value="#{courseTrainingAction.trainingBean.id}"></h:inputHidden>
		<h:inputHidden id="hiddenOptionTypeId" value="#{courseTrainingAction.trainingBean.training_options_type}"></h:inputHidden>
		<div class="row page-head">
			<h3 class="page-title">
				<i class="n-icon-selection  n-icon-black"></i><h:outputText value="#{messages['training_page_title']}"/>&nbsp;&gt;&nbsp;<b><h:outputText value="#{messages['training_page_edit']}" /></b>
			</h3>
		</div>
              <legend>
              		<h:outputText value="#{messages['training_page_training_btn']}"></h:outputText>
              </legend>
              <div class="form-white">
				<div class="control-group" >
					<h:outputText styleClass="control-label" value="#{messages['training_page_no']}" />
					<div class="controls">
						<h:inputText id="training_no" value="#{courseTrainingAction.trainingBean.training_no}" disabled="true"></h:inputText>
						<h:message for="training_no" style="color:red" />
					</div>
				</div>
				
				<div class="control-group" >
					<h:outputText styleClass="control-label" value="#{messages['training_page_contents']}" />
					<div class="controls">
						<h:inputText id="training_contents" value="#{courseTrainingAction.trainingBean.training_contents}" ></h:inputText>
						<h:message for="training_contents" style="color:red" />
					</div>
				</div>
				
				<div class="control-group" >
					<h:outputText styleClass="control-label" value="#{messages['training_page_options_type']}" />
					<div class="controls">
						<h:selectOneRadio id="options_select" onchange="optionSelect(this.value);" value="#{courseTrainingAction.trainingBean.training_options_type}">
							<f:selectItem itemValue="1" itemLabel="#{messages['training_page_options_type_judgment']}"/>
							<f:selectItem itemValue="0" itemLabel="#{messages['training_page_options_type_select']}"/>
						</h:selectOneRadio>
						<h:message for="options_select" style="color:red" />
					</div>
				</div>
				
				<div id="optionSelectDiv1" class="control-group" >
					<h:outputText styleClass="control-label" value="#{messages['training_page_options_type_judgment']}" />
					<div class="controls">
						<h:selectOneRadio id="options_judgment" value="#{courseTrainingAction.trainingBean.training_options_judgment}" onchange="optionsJudgment(this.value);">
							<f:selectItem itemValue="1" itemLabel="#{messages['label_right']}"/>
							<f:selectItem itemValue="0" itemLabel="#{messages['label_error']}"/>
						</h:selectOneRadio>
						<h:message for="options_judgment" style="color:red" />
					</div>
				</div>
				
				<div id="optionSelectDiv2" class="control-group"  style="display: none">
					<h:outputText styleClass="control-label" value="#{messages['training_page_options_type_select']}" />
					<div class="controls">
						<h:panelGrid columns="3">
							<h:outputText value="A:"></h:outputText>
							<h:inputText id="training_optionsA" value="#{courseTrainingAction.trainingBean.training_options_select_a}" ></h:inputText>
							<h:message for="training_optionsA" style="color:red" />
							
							<h:outputText value="B:"></h:outputText>
							<h:inputText id="training_optionsB" value="#{courseTrainingAction.trainingBean.training_options_select_b}" ></h:inputText>
							<h:message for="training_optionsB" style="color:red" />
							
							<h:outputText value="C:"></h:outputText>
							<h:inputText id="training_optionsC" value="#{courseTrainingAction.trainingBean.training_options_select_c}" ></h:inputText>
							<h:message for="training_optionsC" style="color:red" />
							
							<h:outputText value="D:"></h:outputText>
							<h:inputText id="training_optionsD" value="#{courseTrainingAction.trainingBean.training_options_select_d}" ></h:inputText>
							<h:message for="training_optionsD" style="color:red" />
						</h:panelGrid>
					</div>
				</div>
				
				<div id="optionSelectDiv3" class="control-group" >
					<h:outputText styleClass="control-label" value="#{messages['training_page_answer']}" />
					<div class="controls">
						<h:selectOneMenu id="training_refrence_answer" value="#{courseTrainingAction.trainingBean.training_refrence_answer}">
							<f:selectItem itemLabel="A" itemValue="A" />
							<f:selectItem itemLabel="B" itemValue="B" />
							<f:selectItem itemLabel="C" itemValue="C" />
							<f:selectItem itemLabel="D" itemValue="D" />
						</h:selectOneMenu>
						
						<h:message for="training_refrence_answer" style="color:red" />
					</div>
				</div>
				
				<div  class="control-group" >
					<h:outputText styleClass="control-label" value="#{messages['training_page_score']}" />
					<div class="controls">
						<h:inputText id="training_score" value="#{courseTrainingAction.trainingBean.training_score}" ></h:inputText>
						<h:message for="training_score" style="color:red" ></h:message>
						<h:outputFormat value="#{messages['course_page_course_submit_error_4']}" style="color:red" rendered="#{courseTrainingAction.showErrorMsg}"> 
							<f:param value="#{courseTrainingAction.traningCurrTotalScore}"/> 
							<f:param value="#{courseTrainingAction.traningTotalScore}"/> 
						</h:outputFormat>
					</div>
				</div>
			</div>
            <h:message for="formid" style="color:red" />
          <div class="form-actions">
            <h:commandButton value="#{messages['btn_submit']}" styleClass="btn btn-primary" action="#{courseTrainingAction.editTraining}" />
			<h:outputText value=" "></h:outputText>
			<h:commandButton value="#{messages['btn_cancel']}" action="main" styleClass="btn" />
          </div>
	</h:form>
	<script src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		//document.getElementById('viewDiv').scrollIntoView();
	});
	</script>
</body>
</f:view>
</html>
